import React, { useEffect, useRef, useState } from "react";
import styles from "./styles.module.scss";

export default function Scroll(props:{init:number,interTime:number}) {
  const [init, setInit] = useState(props.init);
  const [num, setNum] = useState<number[]>([]);
  // const [y, setY] = useState(0);
  // const [z, setZ] = useState(0);
  const value: any = useRef();
  value.current = () => {
    setInit(init + 1)
  };
  useEffect(() => { 
    
    let numArr: number[] = [];
    init.toString().split("").forEach((item) => {
      numArr.push(parseInt(item));
    }); 
    setNum(numArr);
    console.log(typeof(num[0]));
    const timer = setInterval(() => {
      value.current();
    }, props.interTime);
    return () => {
      console.log("清除定时器");
      clearInterval(timer);
    };
     //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [init]);

  return (
    <div className={styles.Box}>
      {num.map((item, index) => {
        return (
          <div className={styles.num} key={index}>
            <div
              className={styles.content}
              style={{transform:item === 0?'translateY(-90%)':`translateY(-${(item-1)*10}%)` }}
            >
              1 2 3 4 5 6 7 8 9 0
            </div>
          </div>
        );
      })}
    </div>
  );
}
